<!--
 * @Description: 页面切换动画
 * @Author: zhailei
 * @Date: 2021-06-02 13:38:08
 * @LastEditTime: 2021-09-15 11:59:53
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\transition\PageToggleTransition.vue
-->
<template>
  <transition
    v-if="!disabled"
    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
  >
    <slot></slot>
  </transition>
  <div v-else><slot></slot></div>
</template>

<script>
import { preset as animates } from "@/config/default/animate.config";

export default {
  name: "PageToggleTransition",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    animate: {
      type: String,
      validator(value) {
        return animates.findIndex((item) => item.name == value) != -1;
      },
      default: "bounce",
    },
    direction: {
      type: String,
      validator(value) {
        return (
          [
            "x",
            "y",
            "left",
            "right",
            "up",
            "down",
            "downLeft",
            "upRight",
            "downRight",
            "upLeft",
            "downBig",
            "upBig",
            "downLeft",
            "downRight",
            "topRight",
            "bottomLeft",
            "topLeft",
            "bottomRight",
            "default",
          ].indexOf(value) > -1
        );
      },
    },
    reverse: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    enterAnimate() {
      return this.activeClass(false);
    },
    leaveAnimate() {
      return this.activeClass(true);
    },
  },
  methods: {
    activeClass(isLeave) {
      let animate = animates.find((item) => this.animate == item.name);
      if (animate == undefined) {
        return "";
      }
      let direction = "";
      if (this.direction == undefined) {
        direction = animate.directions[0];
      } else {
        direction = animate.directions.find((item) => item == this.direction);
      }
      direction =
        direction == undefined || direction === "default" ? "" : direction;
      if (direction != "") {
        direction =
          isLeave && this.reverse
            ? this.reversePosition(direction, animate.directions)
            : direction;
        direction = direction[0].toUpperCase() + direction.substring(1);
      }
      let t = isLeave ? "Out" : "In";
      return animate.name + t + direction;
    },
    reversePosition(direction, directions) {
      if (direction.length == 0 || direction == "x" || direction == "y") {
        return direction;
      }
      let index = directions.indexOf(direction);
      index = index % 2 == 1 ? index - 1 : index + 1;
      return directions[index];
    },
  },
};
</script>

<style lang="less">
.page-toggle-enter-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
.page-toggle-leave-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
.page-toggle-enter {
}
.page-toggle-leave-to {
}
</style>
